<template>
    <!-- 表格顶部的操作栏 -->
    <div style="margin-bottom: var(--card-space);" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
    </div>

    <!-- 表格 -->
    <el-table :data="data" :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }">
        <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
            :align="item.align ?? 'left'" :width="item.width ?? 'auto'" v-bind="item.settings">
            <template #default="scope" v-if="$slots[item.prop]">
                <slot :name="item.prop" :row="scope.row"></slot>
            </template>
        </el-table-column>
    </el-table>

    <div v-if="pageData" class="flex-end" style="margin-top: 22px;">
        <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
            :total="total ?? 0" :page-sizes="[5, 10, 20, 40, 100]" background
            layout="total, sizes, prev, pager, next, jumper" />
    </div>
</template>

<script setup lang="ts">
const pageData = defineModel<PageDataType>('pageData');

defineProps<{
    data: any[],
    columns: ColumnItem[],
    total?: number
}>();

</script>

<style lang="scss" scoped></style>